<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>咕哒猎人-微信</title>
#parse("/WEB-INF/views_webapp/layout/css.html")
#parse("/WEB-INF/views_webapp/layout/base.html")
<style type="text/css">
.querengoumai{
	flex: 1;
	-webkit-flex: 1;
}
.jflex{
	display: flex;
	display: -webkit-flex;
}
.querengoumai{
	
}
.saoyisao{
	width:6rem;
	height:6rem;
	display: block;
	text-align: center;
	font-size:4rem;
	line-height: 6rem;
}
</style>
</head>
<body>
	<div class="wrapper">
		<div id="foodbox" class="jflex">
			<div class="foodinfo foodinfo100">
				<img src="${item.mainImg}" class="img" alt="加载中..."/>
				<input type="hidden" class="itemId" value="$!{item.id}">
				<div class="foodtitle">
					$!{item.itemName}
				</div>
				<div class="food_fee">
					<span class="clearFood">-</span>
					#set($retailPrice=$item.retailPrice*0.01)
					#if($item.discountPrice)
						#set($discountPrice=$item.discountPrice*0.01)
						#set($fee=$discountPrice)
						<span class="ff-1">每周特惠</span>
						<span class="ff-2">￥&nbsp;$!{discountPrice}</span>
						<span class="ff-3">原价:￥&nbsp;$!{retailPrice}</span>
					#else
						#set($fee=$retailPrice)
						<span class="ff-2">￥&nbsp;$!{retailPrice}</span>
					#end
				</div>
			</div>
			
			
		</div>
	</div>
	
	<div class="goumai">
		<div class="allfee">
			共需要支付：￥<span id="feecount">$!{fee}</span>
		</div>
		<div class="jflex">
			<a class="bottom_item querengoumai">
				<a id="goumaibtn">立刻购买</a>
			</a>
			<a id="addMore" class="bottom_item saoyisao">
				<i class="iconfont">&#xe620;</i>
			</a>
		</div>
		<div style="font-size: 8px;">调试信息:用户ID:${thirdUserId}</div>
	</div>
	
#parse("/WEB-INF/views_webapp/layout/bottom.html")
<script id="item-tpl" type="text/html">
	<div class="foodinfo">
		<img src="{{mainImg}}" class="img" alt="加载中..."/>
		<input type="hidden" class="itemId" value="{{id}}">
		<div class="foodtitle">
			{{itemName}}
		</div>
		<div class="food_fee">
			<span class="clearFood">-</span>
			{{if discountPrice}}
				<span class="ff-1">每周特惠</span>
				<span class="ff-2">￥{{discountPrice * 0.01}}</span>
				<span class="ff-3">原价:￥{{retailPrice * 0.01}}</span>
			{{else}}
				<span class="ff-2">￥{{retailPrice * 0.01}}</span>
			{{/if}}
		</div>
	</div>
</script>
<script type="text/javascript">
	$(function(){
		$("#addMore").click(function(){
			scan();
		});
		//购买
		$("#goumaibtn").click(function(){
			$.ui.mask("客官稍等……");
			//获取所有购买的商品id
			var ids = $(".itemId");
			var idArray = new Array();
			$.each(ids, function(index, row){ 
				idArray.push($(row).val());
			});
			var idsStr = idArray.join(",");
			window.location.href= path + "/h5/wx/pay?ids=" + idsStr;
		});
		bindDel();
	});
	
	function bindDel(){
		$(".clearFood").click(function(){
			var that=$(this);
			$.ui.confirm("删除确认","我辣么好吃，确认不要了？",function(){
				that.parent().parent().remove();
				if($(".foodinfo").length==1){
					$(".foodinfo").addClass("foodinfo100");
				}
			});
		});
	}
	
	function scan(){
		try{
			wx.scanQRCode({
			    needResult:1,
			    scanType: ["qrCode"],
			    success: function (res) {
			    	var result = res.resultStr;
			    	addItem(result);
				},
				fail: function (res) {
			        alert("scan-fail" + JSON.stringify(res));
			      }
			});
		}catch(e){
			alert("error");
		}
	}
	
	function addItem(qrData){
		if(qrData == null || qrData == ""){
			return $.ui.tip("二维码数据为空!");
		}
		var id = qrData.substring(qrData.lastIndexOf("/") + 1,qrData.length);
		if(id == ""){
			return $.ui.tip("二维码数据中不包含商品信息!");
		}
		
    	//从服务器获取商品信息
    	$.ui.mask("客官稍等……");
		$.ajax({
		    type: 'POST',
		    url: path+"/h5/item/getItem" ,
		    data: {id:id},
		    dataType:"json",
		    success: function(resp){
		    	if(resp.code != 200 || resp.data == null){
					return $.ui.alert("未查询到商品信息!");
		    	}
		    	
		    	var data = resp.data;
	    		var _tpl=template("item-tpl",data);
	    		//如果是第二个
	    		$(".foodinfo100").removeClass("foodinfo100");
	    		document.getElementById("foodbox").insertAdjacentHTML("beforeEnd", _tpl);
	    		//更新总价
	    		var nowCount=$("#feecount").html();
	    		var price = 0;
	    		if(data.discountPrice){
	    			price = data.discountPrice;
	    		}else{
	    			price = data.retailPrice;
	    		}
	    		var fee = parseFloat(nowCount) + parseFloat(price*0.01);
    			fee = fee.toFixed(2);
	    		$("#feecount").html(fee);
	    		
	    		$.ui.unmask();
	    		bindDel();
		    } ,
		    error : function() {  
	    		$.ui.unmask();
		    	alert("查询商品信息异常！");
	    	} 
		});
	}
</script>
<!--如果是微信客户端，需要以下代码--->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
try{
	wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '${config.appId}', // 必填，公众号的唯一标识
    timestamp:'${config.timestamp}', // 必填，生成签名的时间戳
    nonceStr: '${config.nonceStr}', // 必填，生成签名的随机串
    signature: '${config.signature}',// 必填，签名，见附录1
    jsApiList: [
    	'scanQRCode'
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});	
}catch(e){
	alert("error");
}
wx.ready(function () {
	 WeixinJSBridge.call('hideOptionMenu');
});
</script>
</body>
</html>